<template>
	<view class="">
		<!-- 导航栏 -->
		<tabBar :currentPagePath="this.$route.meta.pagePath"></tabBar>
		<u-navbar leftText="返回" title="待答复案件(测试版)">
			<view class="u-nav-slot" slot="left">
				<view class="navbar-left">
					<u-icon name="arrow-left" size="16"></u-icon>
					<span>返回</span>
				</view>
			</view>
		</u-navbar>
		
		<!-- 案件列表 -->
		<view v-if="pendList && pendList.length > 0" class="case_list">
			<view v-for="(item, index) in pendList" :key="index" class="case_content" @click="showDetail(item)">
				<view class="case_content_headview">
					<view class="case_content_headview_head">
						{{item.acceptcode}}
					</view>
					<view class="case_content_headview_toDoImg">
						<span>待答复</span>
					</view>
				</view>
				<view class="case_content_info">
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							业务名称：
						</view>
						<view class="case_content_info_column_content">
							行政复议
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							发送人部门：
						</view>
						<view class="case_content_info_column_content">
							{{ item.senddeptname }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							发送人名称：
						</view>
						<view class="case_content_info_column_content">
							{{ item.sendusername }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							接收人部门：
						</view>
						<view class="case_content_info_column_content">
							{{ item.receivedeptname }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							接收人姓名：
						</view>
						<view class="case_content_info_column_content">
							{{ item.receiveusername }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							复议申请人：
						</view>
						<view class="case_content_info_column_content">
							{{ item.applyname }}
						</view>
					</view>
					<view class="case_content_info_column">
						<view class="case_content_info_column_title">
							发送时间：
						</view>
						<view class="case_content_info_column_content">
							{{ item.sendtime }}
						</view>
					</view>
				</view>
			</view>
			<u-loadmore class="case_loadmore" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<view v-if="empty" class="case_empty">
			<u-empty mode="data" text="暂无待答复案件"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getTodoListByUserid
	} from "@/common/api/respond/respond.js"
	export default {
		data() {
			return {
				pendList: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				pageinfo: {
					pageNumber: 1,
					pageSize: 10,
					f_receiveUserId: "",
					f_pStatus: 100600
				},
				empty: false
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.pageinfo.f_receiveUserId = JSON.parse(sessionStorage.getItem("APP_USER")).id
			this.getPendingList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
				title: "加载中"
			})
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
			this.pendList = [],
			this.pageinfo.pageNumber = 1
			this.getPendingList()
		},
		//加载更多
		onReachBottom() {
			if (this.status == "nomore") {
				return
			}
			uni.showLoading({
				title: "加载中"
			})
			this.status = "loading"
			this.pageinfo.pageNumber++
			this.getPendingList()
		},
		methods: {
			reload() {
				uni.showLoading({
					title: "加载中"
				})
				this.pendList = [],
				this.pageinfo.pageNumber = 1
				this.getPendingList()
			},
			// 是否手机端
			isMobile() {
				const mobileFlag = {}
				mobileFlag.value = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				if (mobileFlag.value) {
					return true;
				} else {
					return false;
				}
			},
			// 跳转到详情页面
			showDetail(item) {
				if(this.isMobile()) {
					uni.navigateTo({
						url: `/pages/respond/pend/pendMobile?id=${item.id}&type=pend`
					})
				} else {
					uni.navigateTo({
						url: `/pages/respond/pend/pendDetail?id=${item.id}&type=pend`
					})
				}
			},
			// 获取待办列表
			async getPendingList() {
				let res = await getTodoListByUserid(this.pageinfo)
				if (res.code == 0) {
					if (res.data.records && res.data.records.length) {
						this.empty = false
						this.pendList = this.pendList.concat(res.data.records)
						if (this.pendList.length == res.data.total) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
					} else {
						this.pendList = []
						this.empty = true
					}
				}
				uni.hideLoading()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.case_list {
		box-sizing: border-box;
		margin-top: 10rpx;
		padding-bottom: 140rpx;
	}

	.case_content:last-child {
		margin-bottom: 0;
	}

	.case_content {
		box-sizing: border-box;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 3px 4px 21px 0px #F5F5F5;
		border-radius: 10px;
		padding: 30rpx;
		position: relative;
		margin-bottom: 30rpx;
		cursor: pointer;

		&_headview {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;

			&_head {
				font-size: 1rem;
				font-weight: 550;
				color: #000000;
			}

			&_toDoImg {
				background: linear-gradient(90deg, #FFD97A 0%, #FF9F00 54%, #D97E00 100%);
				border-radius: 0rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.8rem;
				font-weight: bold;
				color: #FFFFFF;
				position: absolute;
				right: 0;
				top: 0;
				padding: 10rpx 30rpx;
			}
		}


		&_info {
			background: #fafafa;
			border-radius: 10px;
			margin-top: 30rpx;
			padding: 20rpx;

			&_column {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: row;
				padding: 0px 15px;

				&_title {
					width: 5rem;
					height: 1.6rem;
					font-size: 0.8rem;
					font-weight: 500;
					color: #000000;
					opacity: 0.65;
					text-align: justify;
					text-align-last: justify;
				}

				&_content {
					width: 14rem;
					height: 1.6rem;
					font-size: 0.8rem;
					font-weight: 550;
					color: #1F1F1F;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.case_loadmore {}

	.case_empty {
		margin-top: 10rem;
	}

	/deep/ .uni-page-wrapper {
		background-color: #F5F5F5;
	}
</style>